<!-- 推送计划组件间 -->
<template>
    <div>
        <div class="cc">
            <div>
                <p v-if="courses.length>0">推荐课程</p>
                <article class="comm-course-list2">
                    <ul class="of" id="bna">
                        <li v-for="course in courses" :key="course.id">
                            <div class="cc-l-wrap">
                                <section class="course-img">
                                    <img
                                        :src="course.cover"
                                        class="img-responsive"
                                        :alt="course.title"
                                        style="width:100%;height:200px"
                                    />
                                    <div class="cc-mask">
                                        <a
                                            :href="'/course/'+course.id"
                                            :title="course.title"
                                            class="comm-btn c-btn-1"
                                        >开始学习</a>
                                    </div>
                                </section>
                                <h3 class="hLh30 txtOf mt10">
                                    <a
                                        :href="'/course/'+course.id"
                                        :title="course.title"
                                        class="course-title fsize18 c-333"
                                    >{{course.title}}</a>
                                </h3>
                                <section class="mt10 hLh20 of">
                                    <span class="fr jgTag bg-green">
                                        <i class="c-fff fsize12 f-fA">{{course.price===0?"免费":"付费"}}</i>
                                    </span>
                                    <span class="fl jgAttr c-ccc f-fA">
                                        <i class="c-999 f-fA">{{course.buyCount}}人学习</i>
                                        |
                                        <i
                                            class="c-999 f-fA"
                                        >{{course.viewCount}}人浏览</i>
                                    </span>
                                </section>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </article>
            </div>

            <div v-if="classrooms.length>0" style="position: relative; top: 10px;">
                <p>推荐班级</p>
                <article class="comm-course-list2">
                    <ul class="of" id="bna">
                        <li v-for="classroom in classrooms" :key="classroom.id">
                            <div class="cc-l-wrap">
                                <section class="course-img">
                                    <img
                                        :src="classroom.cover"
                                        class="img-responsive"
                                        :alt="classroom.name"
                                        style="width:100%;height:200px"
                                    />
                                    <div class="cc-mask">
                                        <a
                                            :href="'/classroom/'+classroom.id"
                                            :title="classroom.name"
                                            class="comm-btn c-btn-1"
                                        >进去逛逛</a>
                                    </div>
                                </section>
                                <h3 class="hLh30 txtOf mt10">
                                    <a
                                        :href="'/classroom/'+classroom.id"
                                        :title="classroom.name"
                                        class="course-title fsize18 c-333"
                                    >{{classroom.name}}</a>
                                </h3>
                                <section class="mt10 hLh20 of">
                                    <span class="fr jgTag bg-green">
                                        <i
                                            class="c-fff fsize12 f-fA"
                                        >{{classroom.price===0?"免费":"付费"}}</i>
                                    </span>
                                </section>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </article>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getTodayPushSchedule } from "@/api/course/push";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            classrooms: [],
            courses: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        init() {
            getTodayPushSchedule().then((response) => {
                this.classrooms = response.data.classrooms;
                this.courses = response.data.courses;
                this.$store.commit(
                    "setNewNums",
                    this.classrooms.length + this.courses.length
                );
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
.cc {
    position: relative;
    left: 20px;
    top: 15px;
}

p {
    font-size: 150%;
    font-weight: 700;
    color: rgb(118, 181, 235);
}
</style>